<template>
  <div class="box1">
    <!-- +++++++++++++++++++++消息列表+++++++++++++++++++++++++++++++++++ -->
    <div style="float: right">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>任务相关信息</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{ "科技公司 " + o }}
        </div>
      </el-card>
    </div>
    <span>查看任务</span>

    <div class="formbd1">
      <el-form ref="form" :model="sizeForm" label-width="100px" size="small">
        <el-form-item label="任务标题">
          <el-input v-model="sizeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="任务类型">
          <p>单人任务</p>
        </el-form-item>
        <el-form-item label="任务奖励">
          <el-input v-model="sizeForm.date1"></el-input>
        </el-form-item>
        <el-form-item label="任务截止时间">
          <el-input v-model="sizeForm.date2"></el-input>
        </el-form-item>
        <el-form-item label="任务级别">
          <el-input v-model="sizeForm.resource"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="formbd2">
      <el-form ref="form" :model="sizeForm" label-width="100px" size="small">
        <el-form-item label="任务描述">
          <el-input
            type="textarea"
            :rows="4"
            style="width: 600px"
            v-model="sizeForm.desc"
          ></el-input>
        </el-form-item>
        <el-form-item label="任务要求">
          <el-input
            type="textarea"
            :rows="4"
            style="width: 600px"
            v-model="sizeForm.desc1"
          ></el-input>
        </el-form-item>

        <div>
          <el-form-item class="btn3">
            <el-button type="primary" @click="dialogFormVisible = true">确认完成</el-button>
            <el-button @click="gocl">关闭任务</el-button>
            <!-- 111111111111111111111111111 -->
            <el-dialog title="确认完成" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="完成程度：" :label-width="formLabelWidth">
                  <el-input style="width:300px"  v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item style="margin-left:38px" label="理由说明：">
                  <el-input style="width:300px; margin-top:10px"  rows="3" type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="gocl"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <!-- 111111111111111111111111111 -->
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>
<style>
.box1 {
  width: 1250px;
  height: 660px;
  background-color: white;
  /* padding-top: 50px; */
}
.head {
  float: left;
}
.formbd1 {
  width: 500px;
  /* border: red solid 1px; */
  position: absolute;
  top: 150px;
  /* margin-left: 30px; */
}
.formbd2 {
  width: 710px;
  /* border: red solid 1px; */
  position: absolute;
  top: 405px;
  /* margin-left: 30px; */
}
.btn3 {
  margin-top: 85px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>

<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
      sizeForm: {
        name: "年后年后年后年后年后年后年后年后",
        //  radio: '1',
        // region: "三天",
        date1: "1,000",
        date2: "三天",
        // delivery: false,
        // type: [5],
        resource: "一般",
        desc: "年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年年后年后年后年后年年后年后年后年后年年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后",
        desc1:
          "年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年年后年后年后年后年年后年后年后年后年年后年后年后年后年年后年后年后年后年后年后年后年后年后年后年后年后年后",
      },
    };
  },
  methods: {
    gocl() {
      this.$router.push("/sscl");
    },
  },
};
</script>